import React, {  useState } from 'react';
import './App.css';
import {
  BrowserRouter,
  Route,
  Routes,
  NavLink
} from "react-router-dom";
import { Layout, Menu, } from 'antd'
import { routes, RoutesProps } from './routes';
import PortfolioOverview from 'pages/PortfolioOverview'

const { SubMenu } = Menu;
const {  Sider, Content } = Layout;

const resolveMenu = (routeArrays: RoutesProps[]) => {

  return (
    routeArrays.map((route: RoutesProps, index: number) => {
      if (route.routes) {
        return <SubMenu key={`route-${index}`} title={route.name}>
          {resolveMenu(route.routes)}
        </SubMenu>
      } else {
        return <Menu.Item key={route.path}>
          <NavLink to={route.path || ''}> {route.name}</NavLink>
        </Menu.Item>
      }
    })
  )
}

function App() {
  // const navigate = useNavigate()
  const [collapsed, setCollapsed] = useState(false)
  return (
    <div className="App">
      <BrowserRouter>
        <Layout className="layout">
          <Sider className="sider-layout" collapsible collapsed={collapsed} onCollapse={setCollapsed}>
            <Menu
              mode="inline"
              theme="dark"
            >
              {resolveMenu(routes)}
            </Menu>
          </Sider>
          <Layout>
            <Content className="paddingContent">
              <Routes>
                <Route path="/" element={null} />
                <Route path="portfolio-overview/" element={<PortfolioOverview />} />
              </Routes>
            </Content>
          </Layout>
        </Layout>
      </BrowserRouter>
    </div>
  );
}

export default App;
